<template>
	<view class="main">
		<u-cell-group>
			<view class="total" style="margin-top: 2px;">
				<u-cell>
					<text slot="icon" style="font-size: 17px;color: #212121;">{{ '基本信息' }}</text>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">事件编号</view>
					<view slot="right-icon" class="contentText">{{sjbh}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">站点编号</view>
					<view slot="right-icon" class="contentText">{{siteId}}</view>
				</u-cell>

				<u-cell :border="false">
					<view slot="title" class="titleText">风险等级</view>
					<view slot="right-icon" class="contentText">{{fxdj}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置状态</view>
					<view slot="right-icon" class="contentText">{{czjg}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">事件位置</view>
					<view slot="right-icon" class="contentText">{{sjwz}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">经度 | 纬度</view>
					<view slot="right-icon" class="contentText">{{jdwd}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">事件描述</view>
					<text slot="right-icon"
						style="width:70vw; white-space: normal; word-wrap: break-word; text-align: right; font-size: 14px; line-height: 24px; color:  #212121;">{{ sjms }}</text>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">发生时间</view>
					<view slot="right-icon" class="contentText">{{fssj}}</view>
				</u-cell>
			</view>
			<view class="doing" v-if="czjg==='处理中'">
				<u-cell>
					<text slot="icon" style="font-size: 17px;color: #212121;">{{ '处理中状态信息' }}</text>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置人员ID</view>
					<view slot="right-icon" class="contentText">{{czryId}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置人员姓名</view>
					<view slot="right-icon" class="contentText">{{czryxm}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置开始时间</view>
					<view slot="right-icon" class="contentText">{{czkssj}}</view>
				</u-cell>
			</view>
			<view class="done" v-if="czjg==='已完成'">
				<u-cell>
					<text slot="icon" style="font-size: 17px;color: #212121;">{{ '已完成状态信息' }}</text>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置人员ID</view>
					<view slot="right-icon" class="contentText">{{czryId}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置人员姓名</view>
					<view slot="right-icon" class="contentText">{{czryxm}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置开始时间</view>
					<view slot="right-icon" class="contentText">{{czkssj}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置结束时间</view>
					<view slot="right-icon" class="contentText">{{czjssj}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">处置描述</view>
					<text slot="right-icon"
						style="width:70vw; white-space: normal; word-wrap: break-word; text-align: right; font-size: 14px; line-height: 24px; color: #212121;">{{ czms }}</text>
				</u-cell>
				<view class="imgs" style="display: flex;flex-direction: column;padding: 0px 16px 20px 16px;">
					<view class="img" :style="getWidth()" v-for="(item,index) in imgList" :key="index">
						<img :src="item.url" :style="getImageStyle()" />
					</view>
				</view>
				<!-- <u-cell title="备注" :border="false">
				  <text slot="right-icon" style="width:70vw; white-space: normal; word-wrap: break-word; text-align: right; font-size: 14px; line-height: 24px; color: #606266;">{{ bz }}</text>
				</u-cell> -->
			</view>
		</u-cell-group>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		getDateDic,
		getMissionDetail
	} from '@/common/api.js'
	export default {
		onLoad: function(option) {
			this.id = option.ywid
		},
		onShow() {
			document.body.style.overflow = 'auto';
		},
		data() {
			return {
				/* 事件状态 */
				status: {
					status: "Enabled",
					type: "EVENT_HANDLE_STATUS"
				},
				sss: {
					status: "Enabled",
					type: "EVENT_RISK_LEVEL"
				},
				/* 初始信息 */
				id: null,
				statusList: [],
				sssList: [],
				/* 展示信息 */
				sjbh: null,
				siteId: null,
				sjwz: null,
				sjms: null,
				fxdj: null,
				fssj: null,
				czjg: null,
				/* 未处理 */
				jdwd: null,
				/* 处理中 */
				czryId: null,
				czryxm: null,
				czkssj: null,
				/* 已完成 */
				czjssj: null,
				czms: null,
				bz: null,
				imgList: [],
			}
		},
		methods: {
			/* 查询事件状态数据字典 */
			async getStatusL() {
				await getDateDic(this.status).then(response => {
					this.statusList = response
				})
				await getDateDic(this.sss).then(response => {
					this.sssList = response
				})
			},
			getWidth() {
				let a = uni.getSystemInfoSync().windowWidth
				let b = a - 32
				return {
					'width': b
				}
			},
			getImageStyle() {
				let a = uni.getSystemInfoSync().windowWidth
				let b = a - 32
				return {
					'width': b + 'px',
					'height': 'auto',
					'object-fit': 'cover',
					'padding-top': '5px'
				}
			},
			async getYWDetail(id) {
				getMissionDetail({
					id: id
				}).then(response => {
					let temp = response
					this.imgList = response.fjList
					this.sjbh = temp.sjbh
					this.siteId = temp.siteId
					this.sjwz = temp.sjwz
					this.sjms = temp.sjms

					this.fssj = temp.fssj
					this.jdwd = temp.jd + "°E" + " | " + temp.wd + "°N"

					let statusTemp = this.statusList.find(status => status.code === temp.czjg);
					if (statusTemp) {
						this.czjg = statusTemp.name;
					}

					let sssTemp = this.sssList.find(item => item.code == temp.fxdj);
					if (sssTemp) {
						this.fxdj = sssTemp.name;
					}

					if (this.czjg === '处理中') {
						this.czryId = temp.czryId
						this.czryxm = temp.czryxm
						this.czkssj = temp.czkssj
					}
					if (this.czjg === '已完成') {
						this.czryId = temp.czryId
						this.czryxm = temp.czryxm
						/* this.czryId = temp.czryId + " | " + temp.czryxm */
						this.czkssj = temp.czkssj
						this.czjssj = temp.czjssj
						this.czms = temp.czms
						this.bz = temp.bz
					}
				})
			}
		},
		async mounted() {
			await this.getStatusL(),
				await this.getYWDetail(this.id)
		}
	}
</script>

<style>
	.titleText {
		font-family: 'PingFangSC-Regular';
		font-size: 14px;
		color: #999999;
		font-weight: 400;
	}

	.contentText {
		font-family: 'PingFangSC-Regular';
		font-size: 14px;
		color: #212121;
		text-align: right;
		font-weight: 400;
	}
</style>